<template>
    <div>
        <div style="font-size: 18px;font-weight: 600;color: rgba(0, 0, 0, .6);margin-bottom: 16px;">基础信息</div>
        <div class="flex flex_wrap" style="margin-bottom: 16px;">
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>车种：</div>
                </div>
                <a-auto-complete v-model="itemData.car_type" :data="carTypeData" @blur="carTypeSaveHistory" @search="handleCarTypeSearch" :style="{flex:1}" placeholder="请输入车种"/>
                <!-- <a-input v-model="itemData.car_type" :style="{flex:1}" placeholder="请输入车种" allow-clear /> -->
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>车号：</div>
                </div>
                <a-input v-model="itemData.car_no" :style="{flex:1}" placeholder="请输入车号" allow-clear />
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>通知时间：</div>
                </div>
                <a-date-picker
                    style="flex:1"
                    v-model="itemData.notice_time"
                    show-time
                    format="YYYY-MM-DD HH:mm"
                />
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>运输方式：</div>
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.transport_type" :options="props.yunshuList" :field-names="{ value: 'key', label: 'title' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="请选择运输方式" />
                </div>
                
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>服务方式：</div>
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select  v-model="itemData.service_type" :options="serviceList" :field-names="{ value: 'key', label: 'title' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="请选择服务方式" />
                </div>
                
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>托运人：</div>
                </div>
                <a-auto-complete v-model="itemData.shipper" :data="tuoyunData" @blur="tuoyunSaveHistory" @search="handleTuoyunSearch" :style="{flex:1}" placeholder="请输入托运人"/>
                <!-- <a-input v-model="itemData.shipper" :style="{flex:1}" placeholder="请输入托运人" allow-clear /> -->
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>托运经办人：</div>
                </div>
                <a-auto-complete v-model="itemData.shipper_agent" :data="tuoyunUserData" @blur="tuoyunUserSaveHistory" @search="handleTuoyunUserSearch" :style="{flex:1}" placeholder="请输入托运经办人"/>
                <!-- <a-input v-model="itemData.shipper_agent" :style="{flex:1}" placeholder="请输入托运经办人" allow-clear /> -->
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>托运电话：</div>
                </div>
                <a-auto-complete v-model="itemData.shipper_phone" :data="tuoyunPhoneData" @blur="tuoyunPhoneSaveHistory" @search="handleTuoyunPhoneSearch" :style="{flex:1}" placeholder="请输入托运电话"/>
                <!-- <a-input v-model="itemData.shipper_phone" :style="{flex:1}" placeholder="请输入托运电话" allow-clear /> -->
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>发站：</div>
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.sending_station" :options="sendList" :filter-option="filterOption" :field-names="{ value: 'id', label: 'name' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="车站：" @change="handleSendChange($event,1)" />
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.sending_tlj" :options="sendJuList" :field-names="{ value: 'id', label: 'name' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="到/发局" />
                </div>
                
                
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>发站专用线：</div>
                </div>
                <a-input v-model="itemData.sending_station_special" :style="{flex:1}" placeholder="请输入发站专用线" allow-clear />
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>客户名称：</div>
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.dept_id" :options="props.dept_list" :filter-option="filterOption" :field-names="{ value: 'id', label: 'name' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="请选择客户" @change="handleChangeDept" />
                </div>
                
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>客户经办人：</div>
                </div>
                <a-auto-complete v-model="itemData.customer_handler" :data="kehuUserData" @blur="kehuUserSaveHistory" @search="handleKehuUserSearch" :style="{flex:1}" placeholder="请输入客户经办人"/>
                <!-- <a-input v-model="itemData.customer_handler" :style="{flex:1}" placeholder="请输入客户经办人" allow-clear /> -->
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>客户电话：</div>
                </div>
                <a-input v-model="itemData.customer_tel" :style="{flex:1}" placeholder="请输入客户电话" allow-clear />
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>到站：</div>
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.come_address" :options="sendList" :filter-option="filterOption" :field-names="{ value: 'id', label: 'name' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="车站：" @change="handleSendChange($event,2)" />
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.come_tlj" :options="arriveJuList" :field-names="{ value: 'id', label: 'name' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="到/发局" />
                </div>
                
                
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>到站专用线：</div>
                </div>
                <a-input v-model="itemData.arrive_station_special" :style="{flex:1}" placeholder="请输入到站专用线" allow-clear />
            </div>
            <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>合同：</div>
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.contract_id" :options="contractList" :field-names="{ value: 'id', label: 'name' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="请选择合同" @change="handlechangeadderr" />
                </div>
                
            </div>
            <!-- <div class="jcBox flex align_center">
                <div class="flex justify_end" style="width: 100px;">
                    <div style="color: red;">*</div>
                    <div>是否仓储：</div>
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.serve_type" :options="props.fuwuList" :field-names="{ value: 'key', label: 'title' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="请选择是否仓储" />
                </div>
                
            </div> -->
            <div class="jcBox flex align_center" v-if="itemData.service_type == 2 || itemData.service_type == 4">
                <div class="flex justify_end" style="width: 100px;">
                    
                    <div>送货电话：</div>
                </div>
                <a-input v-model="itemData.shipping_tel" :style="{flex:1}" placeholder="请输入送货电话" allow-clear />
            </div>
            <div class=" flex_1 flex align_center" style="margin-bottom: 12px;" v-if="itemData.service_type == 2 || itemData.service_type == 4">
                <div class="flex justify_end" style="width: 100px;">
                    <div>送货地址：</div>
                </div>
                <div class="flex_1" style="overflow: hidden;">
                    <a-select v-model="itemData.shipping_address" :options="peisongaddrrList" :field-names="{ value: 'id', label: 'address' }" :style="{width:'100%'}"
                    allow-clear allow-search placeholder="请选择送货地址" />
                </div>
                
            </div>
        </div>
        <div style="font-size: 18px;font-weight: 600;color: rgba(0, 0, 0, .6);margin-bottom: 16px;">{{itemData.transport_type == 1?'集装箱':itemData.transport_type == 2?'整车':'批量快运'}}运输方式</div>
        <!-- 集装箱运输方式 -->
        <div style="margin-bottom: 16px;">
            <a-table :scroll="{x:'100%'}" :data="boxData" :columns="boxColumns" :pagination="false" v-if="itemData.transport_type == 1" >
                <template #ticket_number="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.ticket_number" placeholder="原票号" allow-clear />
                    </div>
                    <div v-else  @click="handleAdd(record,rowIndex,1)">
                        <a-link><icon-plus /> 添加</a-link>
                    </div>
                </template>
                <template #goods_id="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <a-select v-model="record.goods_id" :options="props.goods_list" :filter-option="filterOption" :field-names="{ value: 'id', label: 'name' }" style="width:100%"
                        allow-clear allow-search placeholder="请选择品名" @change="handleChangeGood" :disabled="rowIndex == 0?false:true" />
                    </div>
                    <div v-else></div>
                </template>
                <template #baozhuang="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <a-auto-complete v-model="record.baozhuang" :data="baozhuangData" @blur="baozhuangSaveHistory(rowIndex)" @search="handleBaozhuangSearch" :style="{flex:1}" placeholder="请输入包装"/>
                        <!-- <a-input style="width: 100%;" v-model="record.baozhuang" placeholder="包装" allow-clear /> -->
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #box="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.box" placeholder="箱号" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #is_empty="{ record }">
                    <div v-if="record.type == 1">
                        <a-select v-model="record.is_empty" :options="is_emptyList" :field-names="{ value: 'key', label: 'title' }" style="width:100%"
                        allow-clear allow-search placeholder="请选择空/重状态" />
                    </div>
                    <div v-else></div>
                </template>
                <template #box_type_id="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <a-select v-model="record.box_type_id" :options="boxTypeList" :field-names="{ value: 'id', label: 'name' }" style="width:100%"
                        allow-clear allow-search placeholder="请选择类型" @change="handleChangeBoxType($event,rowIndex)" />
                    </div>
                    <div v-else></div>
                </template>
                <template #box_belong="{ record }">
                    <div v-if="record.type == 1">
                        <a-select v-model="record.box_belong" :options="box_belongList" :field-names="{ value: 'key', label: 'title' }" style="width:100%"
                        allow-clear allow-search placeholder="请选择箱属" />
                    </div>
                    <div v-else></div>
                </template>
                <template #number_yu="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.number_yu" placeholder="件数" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #bz_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.bz_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #hz_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.hz_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #jf_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.jf_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #cyr_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.cyr_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #size="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.size" placeholder="体积" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #caozuo="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <div @click="handleDel(rowIndex,1)"> <a-link>删除</a-link></div>
                    </div>
                    <div v-else>
                    </div>
                </template>
            </a-table>
            <!-- 整车运输方式 -->
            <a-table :scroll="{x:'100%'}" :data="zhengcheData" :columns="zhengcheColumns" :pagination="false" v-if="itemData.transport_type == 2" >
                <template #ticket_number="{ record,rowIndex }">
                    <div >
                        <a-input style="width: 100%;" v-model="record.ticket_number" placeholder="原票号" allow-clear />
                    </div>
                    <!-- <div v-else  @click="handleAdd(rowIndex,2)">
                        <a-link><icon-plus /> 添加</a-link>
                    </div> -->
                </template>
                <template #goods_id="{ record }">
                    <div v-if="record.type == 1">
                        <a-select  v-model="record.goods_id" :options="props.goods_list" :filter-option="filterOption" :field-names="{ value: 'id', label: 'name' }" style="width:100%"
                        allow-clear allow-search placeholder="请选择品名" />
                    </div>
                    <div v-else></div>
                </template>
                <template #baozhuang="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <a-auto-complete v-model="record.baozhuang" :data="baozhuangData" @blur="baozhuangSaveHistory(rowIndex)" @search="handleBaozhuangSearch" :style="{flex:1}" placeholder="请输入包装"/>
                        <!-- <a-input style="width: 100%;" v-model="record.baozhuang" placeholder="包装" allow-clear /> -->
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #number_yu="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.number_yu" placeholder="件数" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #bz_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.bz_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #hz_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.hz_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #jf_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.jf_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #cyr_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.cyr_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                
                <!-- <template #caozuo="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <div @click="handleDel(rowIndex,2)"> <a-link>删除</a-link></div>
                    </div>
                    <div v-else>
                    </div>
                </template> -->
            </a-table>
            <!-- 批量快运运输方式 -->
            <a-table :scroll="{x:'100%'}" :data="plkyData" :columns="plkyColumns" :pagination="false" v-if="itemData.transport_type == 4" >
                <template #ticket_number="{ record,rowIndex }">
                    <div >
                        <a-input style="width: 100%;" v-model="record.ticket_number" placeholder="原票号" allow-clear />
                    </div>
                    <!-- <div v-else  @click="handleAdd(rowIndex,3)">
                        <a-link><icon-plus /> 添加</a-link>
                    </div> -->
                </template>
                <template #goods_id="{ record }">
                    <div v-if="record.type == 1">
                        <a-select  v-model="record.goods_id" :options="props.goods_list" :filter-option="filterOption" :field-names="{ value: 'id', label: 'name' }" style="width:100%"
                        allow-clear allow-search placeholder="请选择品名" />
                    </div>
                    <div v-else></div>
                </template>
                <template #baozhuang="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <a-auto-complete v-model="record.baozhuang" :data="baozhuangData" @blur="baozhuangSaveHistory(rowIndex)" @search="handleBaozhuangSearch" :style="{flex:1}" placeholder="请输入包装"/>
                        <!-- <a-input style="width: 100%;" v-model="record.baozhuang" placeholder="包装" allow-clear /> -->
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #number_yu="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.number_yu" placeholder="件数" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #bz_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.bz_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #hz_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.hz_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #jf_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.jf_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #cyr_weight="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.cyr_weight" placeholder="重量" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <template #size="{ record }">
                    <div v-if="record.type == 1">
                        <a-input style="width: 100%;" v-model="record.size" placeholder="体积" allow-clear />
                    </div>
                    <div v-else>
                    </div>
                </template>
                <!-- <template #caozuo="{ record,rowIndex }">
                    <div v-if="record.type == 1">
                        <div @click="handleDel(rowIndex,3)"> <a-link>删除</a-link></div>
                    </div>
                    <div v-else>
                    </div>
                </template> -->
            </a-table>
        </div>
        <div class="flex justify_end">
            <a-button type="primary" style="margin-right: 12px;" @click="handleBaoCun(2)">保存并生成账单</a-button>
            <a-button type="primary" @click="handleBaoCun(1)">保存</a-button>
        </div>

        <!-- 确认账单 -->
        <a-modal :mask-closable="false"  v-model:visible="showBill" title="确认账单" @cancel="showBill = false" :width="1400" :footer="false">
        <bill ref="billRef" v-if="showBill" :item="billData" :type="2" @quxiao="showBill = false" @shuaxin="zhangdanshuaxin"></bill>
        </a-modal>
    </div>
    
</template>




<script setup>
    import { ref, reactive, onMounted, onActivated, defineProps } from "vue";
    import predictionManage from "@/api/prediction/predictionManage";
    import commonApi from "@/api/common";
    import bill from "@/components/bill/index.vue"
    import { request } from "@/utils/request.js";
    import { Message } from "@arco-design/web-vue";
    import { pinyin } from "pinyin-pro"
    import tool from '@/utils/tool'
    const emits = defineEmits(['succ'])
    const props = defineProps({
        dept_list:{
            default:[]
        },
        yunshuList:{
            default:[]
        },
        goods_list:{
            default:[]
        },
        fuwuList:{
            default:[]
        },
        item:{
            default:{}
        }
    })
    const showBill = ref(false)
    const billData = ref({})
    const serviceList = ref([
        {
            title:'站到站',
            key:'1'
        },
        {
            title:'站到门',
            key:'2'
        },
        {
            title:'门到站',
            key:'3'
        },
        {
            title:'门到门',
            key:'4'
        },
        
    ])
    const is_emptyList = ref([
        {
            title:'空箱',
            key:'1'
        },
        {
            title:'重箱',
            key:'2'
        },
    ])
    const box_belongList = ref([
        { key: '铁路箱', title: "铁路箱" },
        { key: '自备箱', title: "自备箱" },
    ])
    const sendList = ref([])   // 站列表
    const sendJuList = ref([])   // 发站局列表
    const arriveJuList = ref([])   // 到站局列表
    const contractList = ref([])   // 合同列表
    const peisongaddrrList = ref([])   // 配送地址
    const boxTypeList = ref([])
    const itemData = ref({
        car_type:'',  // 车种
        car_no:'',  // 车号
        notice_time:tool.dateFormat(
			Math.round(new Date().getTime() / 1000).toString(),
			"yyyy-MM-dd hh:mm:ss"
		),  // 通知时间
        transport_type:'1',  // 运输方式
        service_type:'',  //  服务方式
        shipper:'',   // 托运人
        shipper_agent:'',   // 托运经办人
        shipper_phone:'',   // 托运人电话
        sending_station:'',   // 发站
        sending_tlj:'',   // 发 铁路局
        sending_station_special:'',  // 发站专用线
        come_address:'',   // 到站
        come_tlj:'',   // 到 铁路局
        arrive_station_special:'四川威斯腾物流有限公司专用线',  // 到站专用线
        dept_id:'',   // 客户
        customer_handler:'',   // 客户经办人
        customer_tel:'',    // 客户电话
        contract_id:'',   // 合同
        serve_type:'3',   // 是否仓储
        shipping_tel:'',   // 配送电话
        shipping_address:'',   // 配送地址
    })
    const carTypeData = ref([])
    const handleCarTypeSearch = (value)=>{
        // carTypeData.value = carTypeData.value.filter(item => item.includes(value));
    }
    const carTypeSaveHistory = ()=>{
        const value = itemData.value.car_type.trim();
        if (value && !carTypeData.value.includes(value)) {
            carTypeData.value = [value, ...carTypeData.value].slice(0, 10); // 最多保留10条
            localStorage.setItem('car_type', JSON.stringify(carTypeData.value));
        }
    }
    const tuoyunData = ref([])
    const handleTuoyunSearch = (value)=>{
        // tuoyunData.value = tuoyunData.value.filter(item => item.includes(value));
    }
    const tuoyunSaveHistory = ()=>{
        const value = itemData.value.shipper.trim();
        if (value && !tuoyunData.value.includes(value)) {
            tuoyunData.value = [value, ...tuoyunData.value].slice(0, 10); // 最多保留10条
            localStorage.setItem('tuoyun', JSON.stringify(tuoyunData.value));
        }
    }
    const tuoyunUserData = ref([])
    const handleTuoyunUserSearch = (value)=>{
        // tuoyunUserData.value = tuoyunUserData.value.filter(item => item.includes(value));
    }
    const tuoyunUserSaveHistory = ()=>{
        const value = itemData.value.shipper_agent.trim();
        if (value && !tuoyunUserData.value.includes(value)) {
            tuoyunUserData.value = [value, ...tuoyunUserData.value].slice(0, 10); // 最多保留10条
            localStorage.setItem('tuoyunUser', JSON.stringify(tuoyunUserData.value));
        }
    }
    const tuoyunPhoneData = ref([])
    const handleTuoyunPhoneSearch = (value)=>{
        // tuoyunPhoneData.value = tuoyunPhoneData.value.filter(item => item.includes(value));
    }
    const tuoyunPhoneSaveHistory = ()=>{
        const value = itemData.value.shipper_phone.trim();
        if (value && !tuoyunPhoneData.value.includes(value)) {
            tuoyunPhoneData.value = [value, ...tuoyunPhoneData.value].slice(0, 10); // 最多保留10条
            localStorage.setItem('tuoyunPhone', JSON.stringify(tuoyunPhoneData.value));
        }
    }
    const kehuUserData = ref([])
    const handleKehuUserSearch = (value)=>{
        // kehuUserData.value = kehuUserData.value.filter(item => item.includes(value));
    }
    const kehuUserSaveHistory = ()=>{
        const value = itemData.value.customer_handler.trim();
        if (value && !kehuUserData.value.includes(value)) {
            kehuUserData.value = [value, ...kehuUserData.value].slice(0, 10); // 最多保留10条
            localStorage.setItem('kehuUser', JSON.stringify(kehuUserData.value));
        }
    }
    const baozhuangData = ref([])
    const handleBaozhuangSearch = (value)=>{
        // baozhuangData.value = baozhuangData.value.filter(item => item.includes(value));
    }
    const baozhuangSaveHistory = (index)=>{
        const value = boxData.value[index].baozhuang.trim();
        if (value && !baozhuangData.value.includes(value)) {
            baozhuangData.value = [value, ...baozhuangData.value].slice(0, 10); // 最多保留10条
            localStorage.setItem('baozhuang', JSON.stringify(baozhuangData.value));
        }
    }
    const filterOption = (v,option)=>{
        return option.keywords.some(keywords=>keywords.includes(v))
    }
    onMounted(()=>{
        
        console.log(itemData.value)
        request({
            url: 'prediction/dfz/index',
            method: 'get',
            params: {
                pageSize: 1000,
            }
        }).then(res => {
            res.data.items.map((v,i)=>{
                    v.keywords = [
                    v.name,
                    pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
                    pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
                    ]
            })
            sendList.value = res.data.items
            if(props.item.sending_station != ""){
                sendList.value.map((v,i)=>{
                    if(v.id == props.item.sending_station){
                        console.log(props.item.sending_tlj,99999)
                        sendJuList.value = [v.tlj]
                    }
                })
            }
            if(props.item.come_address != ""){
                sendList.value.map((v,i)=>{
                    if(v.id == props.item.come_address){
                        arriveJuList.value = [v.tlj]
                    }
                })
            }
            if(props.item.dept_id != ""){
                handleChangeDept(props.item.dept_id)
            }
            if(props.item.contract_id != ""){
                handlechangeadderr(props.item.contract_id)
            }
            if(props.item.goods_data.length != []){
                let boxArr = JSON.parse(JSON.stringify(props.item.goods_data))
                boxArr.map((v,i)=>{
                    v.type = 1
                })
                
                if(props.item.transport_type == 1){
                    boxArr.push(
                        {
                            ticket_number:'',  
                            goods_id:'',  
                            baozhuang:'',  
                            box:'',  
                            is_empty:'2',  
                            box_type:'',  
                            box_type_id:'',  
                            box_belong:'',
                            number:'',  
                            hz_weight:'',  
                            bz_weight:'',  
                            jf_weight:'',  
                            cyr_weight:'',  
                            size:'',
                            caozuo:'',
                            type:2
                        }
                    )
                    boxData.value = boxArr
                }else if(props.item.transport_type == 2){
                    zhengcheData.value = boxArr
                }else if(props.item.transport_type == 4){
                    plkyData.value = boxArr	
                }
                console.log("boxArr:",boxArr)
            }
        })
        
        request({
            url: "prediction/boxManage/index",
            method: "get",
            params: {
            openPage: false,
            },
        }).then((res) => {
            boxTypeList.value = res.data.items;

        });
        const tuoyunHistory = localStorage.getItem('tuoyun');
        tuoyunData.value = tuoyunHistory ? JSON.parse(tuoyunHistory) : [];
        const savedHistory = localStorage.getItem('tuoyunUser');
        tuoyunUserData.value = savedHistory ? JSON.parse(savedHistory) : [];
        const phoneHistory = localStorage.getItem('tuoyunPhone');
        tuoyunPhoneData.value = phoneHistory ? JSON.parse(phoneHistory) : [];
        const kehuUserHistory = localStorage.getItem('kehuUser');
        kehuUserData.value = kehuUserHistory ? JSON.parse(kehuUserHistory) : [];
        const baozhuangHistory = localStorage.getItem('baozhuang');
        baozhuangData.value = baozhuangHistory ? JSON.parse(baozhuangHistory) : [];
        const carTypeHistory = localStorage.getItem('car_type');
        carTypeData.value = carTypeHistory ? JSON.parse(carTypeHistory) : [];
        itemData.value = JSON.parse(JSON.stringify(props.item))
        itemData.value.shipping_tel = itemData.value.shipping
        console.log("itemData.value:",itemData.value)
    })
    const handleChangeDept = (e) =>{
        request({
            url: 'system/userContract/remote_prediction?dept_id=' + e,
            method: 'get',
            params: {
                pageSize: 1000,
            }
        }).then(res => {
            contractList.value = res.data
            if(res.data.length == 1){
                itemData.value.contract_id = res.data[0].id
                handlechangeadderr(res.data[0].id)
            }
        })
        props.dept_list.map((v,i)=>{
            if(v.id == e){
                itemData.value.customer_handler = v.leader
                itemData.value.customer_tel = v.phone
            }
        })
    }
    const handleChangeGood = (e)=>{
        boxData.value.map((v,i)=>{
            v.goods_id = e
        })
    }
    const handlechangeadderr = (e) =>{   // 获取合同配送地址
        request({
            url: '/system/userContractAddress/index?contract_id=' + e,
            method: 'get',
        }).then(res=>{
            if(res.data.items.length != 0){
                itemData.value.shipping_address = res.data.items[0].id
                itemData.value.shipping_tel = res.data.items[0].mobile
            }
            peisongaddrrList.value = res.data.items
        })
    }
    const handleSendChange = (e,type)=>{
        if(type == 1){
            sendList.value.map((v,i)=>{
                if(v.id == e){
                    sendJuList.value = [v.tlj]
                    itemData.value.sending_tlj = v.tlj.id
                }
            })
        }else{
            sendList.value.map((v,i)=>{
                if(v.id == e){
                    arriveJuList.value = [v.tlj]
                    itemData.value.come_tlj = v.tlj.id
                }
            })
        }
        
    }
    const handleChangeBoxType = (e,index)=>{
        boxTypeList.value.map((v,i)=>{
            if(v.id == e){
                boxData.value[index].box_type = v.name
            }
        })
    }
    const handleDel = (index,type) =>{
        if(type == 1){
            boxData.value.splice(index,1) 
        }else if(type == 2){
            zhengcheData.value.splice(index,1) 
        }else if(type == 3){
            plkyData.value.splice(index,1) 
        }
    }
    const handleAdd = (record,index,type) =>{
        if(type == 1){
            boxData.value.splice(index,0,{ticket_number:'',  
            goods_id:record.goods_id,  
            baozhuang:'',  
            box:'',  
            is_empty:'2',
            box_belong:'',
            box_type:'',  
            box_type_id:'',    
            number_yu:'',  
            hz_weight:'',  
            bz_weight:'',  
            jf_weight:'',  
            cyr_weight:'', 
            size:'',
            caozuo:'',
            type:1})
        }else if(type == 2){
            zhengcheData.value.splice(index,0,{ticket_number:'',  
            goods_id:'',  
            baozhuang:'',  
            number_yu:'',  
            hz_weight:'',  
            bz_weight:'',  
            jf_weight:'',  
            cyr_weight:'', 
            caozuo:'',
            type:1})
        }else if(type == 3){
            plkyData.value.splice(index,0,{ticket_number:'',  
            goods_id:'',  
            baozhuang:'',  
            number_yu:'',  
            hz_weight:'',  
            bz_weight:'',  
            jf_weight:'',  
            cyr_weight:'', 
            size:'',
            caozuo:'',
            type:1})
        }
    }
    const boxData = ref([
        {
            ticket_number:'',  
            goods_id:'',  
            baozhuang:'',  
            box:'',  
            is_empty:'2',  
            box_type:'',  
            box_type_id:'',  
            box_belong:'',
            number_yu:'',  
            hz_weight:'',  
            bz_weight:'',  
            jf_weight:'',  
            cyr_weight:'', 
            size:'',
            caozuo:'',
            type:1
        },
        {
            ticket_number:'',  
            goods_id:'',  
            baozhuang:'',  
            box:'',  
            is_empty:'2',  
            box_type:'',  
            box_type_id:'',  
            box_belong:'',
            number:'',  
            hz_weight:'',  
            bz_weight:'',  
            jf_weight:'',  
            cyr_weight:'',  
            size:'',
            caozuo:'',
            type:2
        }
    ])
    const boxColumns = ref([
        {
            title: "原票号",
            dataIndex: "ticket_number",
            align: "center",
            slotName:'ticket_number',
            width: 150,
        },
        {
            title: "品名",
            dataIndex: "goods_id",
            align: "center",
            slotName:'goods_id',
            width: 150,
        },
        {
            title: "包装",
            dataIndex: "baozhuang",
            align: "center",
            slotName:'baozhuang',
            width: 100,
        },
        {
            title: "箱号",
            dataIndex: "box",
            align: "center",
            slotName:'box',
            width: 150,
        },
        {
            title: "箱型箱类",
            dataIndex: "box_type_id",
            align: "center",
            slotName:'box_type_id',
            width: 150,
        },
        {
            title: "空重状态",
            dataIndex: "is_empty",
            align: "center",
            slotName:'is_empty',
            width: 120,
        },
        {
            title: "箱属",
            dataIndex: "box_belong",
            align: "center",
            slotName:'box_belong',
            width: 120,
        },
        {
            title: "件数",
            dataIndex: "number_yu",
            align: "center",
            slotName:'number_yu',
            width: 100,
        },
        {
            title: "货重",
            dataIndex: "hz_weight",
            align: "center",
            slotName:'hz_weight',
            width: 100,
        },
        {
            title: "计费重量",
            dataIndex: "jf_weight",
            align: "center",
            slotName:'jf_weight',
            width: 100,
        },
        {
            title: "标重",
            dataIndex: "bz_weight",
            align: "center",
            slotName:'bz_weight',
            width: 100,
        },
        {
            title: "承运人重量",
            dataIndex: "cyr_weight",
            align: "center",
            slotName:'cyr_weight',
            width: 100,
        },
        {
            title: "体积",
            dataIndex: "size",
            align: "center",
            slotName:'size',
            width: 100,
        },
        {
            title: "操作",
            dataIndex: "caozuo",
            align: "center",
            slotName:'caozuo',
            width: 100,
            fixed: 'right',
        },
    ])
    const zhengcheData = ref([
        {
            ticket_number:'',  
            goods_id:'',  
            baozhuang:'',  
            number_yu:'',  
            hz_weight:'',  
            bz_weight:'',  
            jf_weight:'',  
            cyr_weight:'', 
            caozuo:'',
            type:1
        },
       
    ])
    const zhengcheColumns = ref([
        {
            title: "原票号",
            dataIndex: "ticket_number",
            align: "center",
            slotName:'ticket_number',
            width: 150,
        },
        {
            title: "品名",
            dataIndex: "goods_id",
            align: "center",
            slotName:'goods_id',
            width: 150,
        },
        {
            title: "包装",
            dataIndex: "baozhuang",
            align: "center",
            slotName:'baozhuang',
            width: 100,
        },
        {
            title: "件数",
            dataIndex: "number_yu",
            align: "center",
            slotName:'number_yu',
            width: 100,
        },
        {
            title: "货重",
            dataIndex: "hz_weight",
            align: "center",
            slotName:'hz_weight',
            width: 100,
        },
        {
            title: "计费重量",
            dataIndex: "jf_weight",
            align: "center",
            slotName:'jf_weight',
            width: 100,
        },
        {
            title: "标重",
            dataIndex: "bz_weight",
            align: "center",
            slotName:'bz_weight',
            width: 100,
        },
        {
            title: "承运人重量",
            dataIndex: "cyr_weight",
            align: "center",
            slotName:'cyr_weight',
            width: 100,
        },
    ])
    const plkyData = ref([
        {
            ticket_number:'',  
            goods_id:'',  
            baozhuang:'',  
            number_yu:'',  
            hz_weight:'',  
            bz_weight:'',  
            jf_weight:'',  
            cyr_weight:'', 
            size:'',
            caozuo:'',
            type:1
        },
    ])
    const plkyColumns = ref([
        {
            title: "原票号",
            dataIndex: "ticket_number",
            align: "center",
            slotName:'ticket_number',
            width: 150,
        },
        {
            title: "品名",
            dataIndex: "goods_id",
            align: "center",
            slotName:'goods_id',
            width: 150,
        },
        {
            title: "包装",
            dataIndex: "baozhuang",
            align: "center",
            slotName:'baozhuang',
            width: 100,
        },
        {
            title: "件数",
            dataIndex: "number_yu",
            align: "center",
            slotName:'number_yu',
            width: 100,
        },
        {
            title: "货重",
            dataIndex: "hz_weight",
            align: "center",
            slotName:'hz_weight',
            width: 100,
        },
        {
            title: "计费重量",
            dataIndex: "jf_weight",
            align: "center",
            slotName:'jf_weight',
            width: 100,
        },
        {
            title: "标重",
            dataIndex: "bz_weight",
            align: "center",
            slotName:'bz_weight',
            width: 100,
        },
        {
            title: "承运人重量",
            dataIndex: "cyr_weight",
            align: "center",
            slotName:'cyr_weight',
            width: 100,
        },
        {
            title: "体积",
            dataIndex: "size",
            align: "center",
            slotName:'size',
            width: 100,
        },
        
    ])
    const zhangdanshuaxin = ()=>{
        showBill.value = false
        emits('succ')
    }
    // 保存
    const handleBaoCun = (tab)=>{
        console.log(itemData.value)
        if(!areValuesNotEmpty(itemData.value)){
            return Message.error('请添加数据，数据不能为空')
        }
        let requestData = JSON.parse(JSON.stringify(itemData.value))
        let jsonData = []
        if(itemData.value.transport_type == 1){
            boxData.value.map((v,i)=>{
                if(v.type == 1){
                    jsonData.push(v)
                }
            })
        }else if(itemData.value.transport_type == 2){
            zhengcheData.value.map((v,i)=>{
                if(v.type == 1){
                    jsonData.push(v)
                }
            })
        }else if(itemData.value.transport_type == 4){
            plkyData.value.map((v,i)=>{
                if(v.type == 1){
                    jsonData.push(v)
                }
            })
        }
        
        let number_yu = 0
        let hz_weight = 0
        let jf_weight = 0
        let bz_weight = 0
        let cyr_weight = 0
        console.log(jsonData)
        if(!areAllValuesDefined(jsonData)){
            return Message.error('请添加数据，表格中数据不能为空')
        }
        let ticket_numberArr = []
        jsonData.map((v,i)=>{
            number_yu += (v.number_yu - 0)
            hz_weight += (v.hz_weight - 0)
            jf_weight += (v.jf_weight - 0)
            bz_weight += (v.bz_weight - 0)
            cyr_weight += (v.cyr_weight - 0)
            ticket_numberArr.push(v.ticket_number)
        })
        requestData.ticket_number = ticket_numberArr.join(',')
        requestData.number_yu = number_yu
        requestData.hz_weight = hz_weight
        requestData.jf_weight = jf_weight
        requestData.bz_weight = bz_weight
        requestData.cyr_weight = cyr_weight
        requestData.goods_id = jsonData[0].goods_id
        requestData.goods_data = jsonData
        console.log('传输的数据：',requestData)
        predictionManage.save(requestData).then(res=>{
            if(res.code == 200){
                Message.success('新增成功！')
                if(tab == 1){
                    emits('succ')
                }else{
                    billData.value.ids = res.data.id.join(',')
                    showBill.value = true
                }
            }else{
                // Message.error(res.message)
            }
            
            
        })
    }
    // 判断对象里面的值不能为空
    const areValuesNotEmpty = (obj)=>{
        console.log("obj:",obj)
        for (const key in obj) {
            if (obj.hasOwnProperty(key) && !obj[key] && key != 'shipping_address' && key != 'shipping' && key != 'shipping_tel') {
                return false;
            }
        }
        return true;
    }
    // 判断数组中的值不为空
    const areAllValuesDefined = (arr) =>{
        if(itemData.value.transport_type == 1){
            return arr.every((item)=> {
                return item.goods_id !== '' && item.ticket_number !== '' && item.box !== '' && item.is_empty !== '' && item.box_type !== '' && item.box_belong !== '' && item.number_yu !== '' && item.hz_weight !== '' && item.bz_weight !== '' && item.cyr_weight !== '' && item.jf_weight !== '';
            });
        }else{
            return arr.every((item)=> {
                return item.goods_id !== '' && item.ticket_number !== '' && item.number_yu !== '' && item.hz_weight !== '' && item.bz_weight !== '' && item.cyr_weight !== '' && item.jf_weight !== '';
            });
        }
    }



    
</script>
<style lang="less" scoped>
.input {
	padding: 4px 12px;
	background: #fff;
	border: 1px solid rgba(242, 243, 245);
	border-radius: 4px;
	outline: none;
	/*清除input点击之后的黑色边框*/
}

.input:focus {
	background: #fff;
	border: 1px solid #1e80ff;
}
.jcBox{
    width: calc((100% - 48px) / 5);
    margin-right: 12px;
    margin-bottom: 12px;
    &:nth-child(5n){
        margin-right: 0px;
    }
}
.marbot12{
        margin-bottom: 12px;
    }
</style>
<script>
export default { name: "prediction:add" };
</script>
